/**
 * 步骤：
 * 1. 排出基本的页面结构（拼积木）
 * 2. 替换数据
 * 3. （可选）解决bug
 */
import React, { Component } from "react";
import { Button, PageHeader, Space, Table, Tag, Pagination ,message} from "antd";
import url from "../../../config/url";
import req from "../../../http/req";
import Tianjia from './tianjia'
import Bianj from "./bianj";
/**
 * title：设置表格标题
 * dataIndex：关联数据的属性名
 * key：提高效率，要求唯一
 * render：（可选）对原有数据进行修饰，返回的数据为最终渲染的数据
 */


const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    align: "center",
  },
  {
    title: "大棚名称",
    dataIndex: "username",
    key: "username",
    align: "center",
  },
  {
    title: "大棚温度",
    dataIndex: "mobile",
    key: "mobile",
    align: "center",
    render: (mobile) => mobile.replace(/\d{3}\d{6}(\d{2})/, "$1"),
  },
  {
    title: "室内温度",
    dataIndex: "gender",
    key: "gender",
    align: "center",
    render: (gender) => {
      // 1=男，2=女，3保密
      if (gender === "1") {
        return <Tag color="pink">低</Tag>;
      }
      if (gender === "2") {
        return <Tag color="blue">中</Tag>;
      }
      if (gender === "3") {
        return <Tag color="yellow">强</Tag>;
      }
    },
  },
  {
    title: "室外温度",
    dataIndex: "status",
    key: "status",
    align: "center",
    render: (gender) => {
      // 1=男，2=女，3保密
      if (gender === "1") {
        return <Tag color="yellow">强</Tag>;
      }
      if (gender === "2") {
        return <Tag color="pink">低</Tag>;
      }
    },
  },
  {
    title: "室内湿度",
    dataIndex: "gender",
    key: "gender",
    align: "center",
    render: (gender) => {
      // 1=男，2=女，3保密
      if (gender === "1") {
        return <Tag color="blue">中</Tag>;
      }
      if (gender === "2") {
        return <Tag color="pink">低</Tag>;
      }
      if (gender === "3") {
        return <Tag color="yellow">强</Tag>;
      }
    },
  },
  {
    title: "室外湿度",
    key: "gender",
    dataIndex: "gender",
    align: "center",
    render: (gender) => {
      // 1=男，2=女，3保密
      if (gender === "1") {
        return <Tag color="pink">低</Tag>;
      }
      if (gender === "2") {
        return <Tag color="yellow">强</Tag>;
      }
      if (gender === "3") {
        return <Tag color="blue">中</Tag>;
      }
    },
  },
  {
    title: "光亮强度",
    key: "status",
    dataIndex: "status",
    align: "center",
    render: (status) => {
      if (status === "1") {
        return <Tag color="red">较弱</Tag>;
      }
      if (status === "2") {
        return <Tag color="green">较强</Tag>;
      }
    },
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    render: (_, record) => (
      <Space size="middle">
        {/* <Button style={{backgroundImage:'linear-gradient(#1FCAB8,#1dCAB8,#1ba299)',borderRadius: '5px',color:'#fff',}}onClick={()=>bianj(record)}>编辑</Button> */}
        <Bianj fn={() => { return record }} />
        <Button style={{ backgroundImage: 'linear-gradient(#5077f6bf,#3d5cc0c1,#3854b1ba)', borderRadius: '5px', color: '#fff', }} onClick={() => shanc(record)}>删除</Button>
      </Space>
    ),

  },
];
const shanc = (props) => {
  const id = props.id
  // console.log(id);
  req.delete(url.Deletedel + `/${id}`).then((res) => {
    // console.log(res);
    if (res.data.errNo === 0) {
      // 刷新页面
      // window.location.reload();
      message.success("删除成功");
    } else {
      message.warning("删除失败");
    }
  });
}

class Index extends Component {
  state = {
    data: [],
    page: 1, // 默认从第一页加载数据
    limit: 10, // 默认每页显示十个数据
    total: 0, // 默认总数
  };

  render() {
    return (
      <div>
        {/* 页头 */}
        <PageHeader style={{ backgroundColor: '#fff' }}
          title="一周数据指标"
          extra={[

            <Tianjia key="1" size="large" type="primary" />

          ]}
        ></PageHeader>

        {/* 表格 */}
        <Table
          columns={columns}
          pagination={false}
          dataSource={this.state.data}
          rowKey="id"
        />

        {/* 分页器 */}
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            padding: "10px 0 10px 0",
            backgroundColor: '#fff',
          }}
        >
          <Pagination
            onChange={this.loadData}
            current={this.state.page}
            total={this.state.total}
          />
        </div>
      </div>
    );
  }

  componentDidMount() {
    const { page, limit } = this.state;
    this.loadData(page, limit);
  }

  // 加载数据的方法
  loadData = (page, limit) => {
    req
      .get(url.GetUsersData, {
        params: {
          page,
          limit,
        },
      })
      .then((res) => {
        // console.log(res);
        this.setState({
          data: res.data.paginate.data,
          total: res.data.paginate.total,
          page: page,
          limit: limit,
        });
      });
  };

}

export default Index;
